<template>
  <div class="works-part tabs-part">
    <div class="part-one flex-between">
      <div class="total-part card">
        <p class="card-name">总视频数</p>
        <div class="part-main flex-between flex-align-items-center">
          <p class="font-20-B">{{ detail.videoNum }}个</p>
          <img src="@/assets/video-icon.png">
        </div>
      </div>
      <div class="views-part card">
        <p class="card-name">观看量</p>
        <div class="part-main flex">
          <div>
            <p class="font-20-B">{{ numConvert(detail.playNum, 2) }}</p>
            <p class="font-14">总观看量</p>
          </div>
          <div>
            <p class="font-18-B">{{ numConvert(detail.averageViewsThirtyDay, 2) }}</p>
            <p class="font-14">30天平均观看量</p>
          </div>
          <div>
            <p class="font-18-B">{{ numConvert(detail.averageViewsSixtyDay, 2) }}</p>
            <p class="font-14">60天平均观看量</p>
          </div>
          <div>
            <p class="font-18-B">{{ numConvert(detail.averageViewsNinetyDay, 2) }}</p>
            <p class="font-14">90天平均观看量</p>
          </div>
          <div>
            <p class="font-18-B">{{ numConvert(detail.averageViewsFifteen, 2) }}</p>
            <p class="font-14">近15个视频平均观看量</p>
          </div>
          <img src="@/assets/view-icon.png">
        </div>
      </div>
    </div>

    <div class="part-two card">
      <p class="card-name">互动率</p>
      <div class="part-main flex-around">
        <div v-for="(item, index) in actionPartList" :key="index" class="action-item">
          <div class="circle-progress">
            <div class="blockOut">
              <div class="block" :style="{ transform: `rotate(${-135 + (item.value * 180 / 100)}deg)` }"></div>
              <div class="value">
                <div class="num font-20-B">{{ item.value }}%</div>
                <div class="title font-14">{{ item.name }}</div>
              </div>
            </div>
            <div class="subtitle font-14">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="part-three card">
      <p class="card-name">近期内容表现</p>
      <div class="top-btns flex">
        <p v-for="(item, index) in recentPartTypeList" :key="index" class="font-12 pointer"
          :class="{ active: recentPartType === item.value }" @click="recentPartTypeChange(item.value)">{{ item.name }}</p>
      </div>
      <div class="part-main">
        <div class="tips flex-between flex-align-items-center">
          <p class="tips-left font-12">*根据红人内容发布日期及监控数据生成</p>
          <div class="tips-right flex flex-align-items-center">
            <i class="iconfont icon-zhexian"></i>
            <span class="font-12">平均互动率为 {{ detail.avgInteractRate }}%</span>
          </div>
        </div>
        <div id="recent-part-echart"></div>
      </div>
    </div>

    <div class="part-four flex-between">
      <div class="calendar-part card">
        <p class="card-name">内容发布时间表</p>
        <div class="hot-base flex-between flex-align-items-center">
          <div class="hot-base-left flex flex-align-items-center">
            <p class="icon flex-center flex-align-items-center">
              <i class="iconfont icon-fabu"></i>
            </p>
            <div class="num">
              <p class="value font-20-B">{{ releaseCount }}个</p>
              <p class="desc font-14">10-12月总内容发布数</p>
            </div>
          </div>
          <div class="hot-base-right">
            <p class="top font-14">当天发布内容数</p>
            <div class="chart-tips flex">
              <div class="chart-tips_bar flex-center">
                <span></span><span></span><span></span><span></span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="dayReleaseCount[2]" class="choose-bar flex-between flex-align-items-center">
          <i class="iconfont icon-a-jiantou-zuo pointer"></i>
          <span class="font-12">10, 11, 12</span>
          <i class="iconfont icon-a-jiantou-you"
            :class="nowMonth === dayReleaseCount[2].month ? 'no-drop' : 'pointer'"></i>
        </div>
        <div class="choose-box flex">
          <div class="column-week flex flex-column">
            <p v-for="(item, index) in weeks" :key="index" class="column-week_box font-12">{{ item }}</p>
          </div>
          <div v-for="(item, index) in dayReleaseCount" :key="index" class="column-month flex-center flex-column">
            <p class="column-month_title font-12">{{ item.monthName }}</p>
            <div v-if="item.days.length > 0" class="column-month_days flex flex-column flex-wrap">
              <template v-if="weekEmptyDay[new Date(item.days[0].time).getDay()] > 0">
                <p v-for="emptyItem in weekEmptyDay[new Date(item.days[0].time).getDay()]" :key="emptyItem"
                  class="day empty"></p>
              </template>
              <p v-for="(dayItem, dayIndex) in item.days" :key="dayIndex" class="day font-14 pointer"
                :class="{ 'bg-level-0': dayItem.count < 1, 'bg-level-1': dayItem.count > 0, 'bg-level-2': dayItem.count > 2, 'bg-level-3': dayItem.count > 4, 'bg-level-4': dayItem.count > 6 }">
                {{
                  dayItem.count }}</p>
            </div>
          </div>
        </div>
        <p class="card-desc">近3个月红人发布内容的具体日期和数量记录，可以更好地了解红人的内容发布规律和频率</p>
      </div>
      <!-- <div class="words-part card">
        <p class="card-name">热点词云</p>
        <p class="card-desc">通过解析红人近百个内容数据，对其内容主题进行归类和权重计算，进而输出该红人的热点词云</p>
      </div> -->
    </div>

    <div v-if="releaseContentForm.total" class="part-five card">
      <p class="card-name">近期发布内容</p>
      <div class="card-view flex flex-wrap">
        <div v-for="(item, index) in releaseContent" :key="index" class="item pointer"
          @click="toLink(videoItem.videoLink)">
          <div class="item-img flex">
            <img :src="item.videoPic">
            <div class="flex-between flex-align-items-center">
              <p class="player flex-center flex-align-items-center">
                <i class="iconfont icon-bofang"></i>
              </p>
              <p class="time font-14">{{ item.releaseTime }}</p>
            </div>
          </div>
          <p class="item-name font-14 ellipsis-2">{{ item.title }}</p>
          <div class="item-data flex flex-align-items-center">
            <p class="flex flex-align-items-center">
              <i class="iconfont icon-guankan"></i>
              <span class="font-12">{{ numConvert(item.playNum, 2) }}</span>
            </p>
            <p class="flex flex-align-items-center">
              <i class="iconfont icon-dianzan"></i>
              <span class="font-12">{{ numConvert(item.praiseNum, 2) }}</span>
            </p>
            <p class="flex flex-align-items-center">
              <i class="iconfont icon-pinglunxiao"></i>
              <span class="font-12">{{ numConvert(item.commentNum, 2) }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="pagination flex">
        <el-pagination :default-page-size="12" background layout="prev, pager, next" :total="releaseContentForm.total"
          @current-change="releaseContentCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
import numConvert from '@/js/numConvert.js';
import * as echarts from "echarts";
import api from '@/api/index.js';

const props = defineProps(['detail']);

const recentPartTypeList = [
  {
    name: '最近30个',
    value: 30
  },
  {
    name: '最近90天',
    value: 90
  }
];
const weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const weekEmptyDay = [6, 0, 1, 2, 3, 4, 5];
const now = new Date();
const nowMonth = `${now.getFullYear()}-${now.getMonth() + 1}`;

const actionPartList = ref([
  {
    name: '平均互动率',
    desc: '近60天发布视频互动率的均值',
    value: props.detail.avgInteractRate.split('%')[0]
  },
  {
    name: '观看量 / 粉丝数',
    desc: '反映了视频在粉丝中的覆盖率',
    value: props.detail.avgPlayNum > 0 ? (props.detail.avgPlayNum * 100 / props.detail.fansNum).toFixed(2) : 0
  },
  {
    name: '点赞数 / 观看量',
    desc: '反映了受众对视频的喜爱程度',
    value: props.detail.praiseNum > 0 ? (props.detail.praiseNum * 100 / props.detail.avgPlayNum).toFixed(2) : 0
  },
  {
    name: '评论数 / 观看量',
    desc: '反映了视频对受众的影响力度',
    value: props.detail.commentNum > 0 ? (props.detail.commentNum * 100 / props.detail.avgPlayNum).toFixed(2) : 0
  }
]);
const recentPartType = ref(30);
const contentPerformance = ref([
  {
    time: '2023-11-26 16:00:00',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    avgInteractRate: '5.12%'
  },
  {
    time: '2023-11-27 16:00:00',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    avgInteractRate: '5.12%'
  },
  {
    time: '2023-11-28 16:00:00',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    avgInteractRate: '5.12%'
  },
  {
    time: '2023-11-27 16:00:00',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    avgInteractRate: '5.12%'
  },
  {
    time: '2023-11-28 16:00:00',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    avgInteractRate: '5.12%'
  }
]);
const releaseCount = ref(88);
const dayReleaseCount = ref([
  {
    month: '2023-10',
    monthName: '十月',
    days: []
  },
  {
    month: '2023-11',
    monthName: '十一月',
    days: []
  },
  {
    month: '2023-12',
    monthName: '十二月',
    days: []
  }
]);
const releaseContentForm = ref({
  influencerId: props.detail.id,
  page: 1,
  perPage: 12
});
const releaseContent = ref([]);

// 切换最近30个或最新90天
const recentPartTypeChange = e => {
  if (recentPartType.value !== e) {
    recentPartType.value = e;
    recentPartEchart();
  }
}
// 近期内容表现echart
const recentPartEchart = () => {
  const domMap = document.getElementById("recent-part-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  let xAxisData = [], seriesData = [];
  contentPerformance.value.forEach(item => {
    const time = new Date(item.time);
    xAxisData.push(`${time.getMonth() + 1}-${time.getDate()}`);
    seriesData.push(item.avgPlayNum);
  });
  const option = {
    dataZoom: [{
      type: 'slider',
      show: true,
      startValue: 0,
      endValue: 25,
      height: 6,
      bottom: '1%',
      zoomLock: true,
      showDetail: false
    }],
    tooltip: {
      //提示框组件
      trigger: 'item',
      formatter: (e) => {
        let value = '';
        value += contentPerformance.value[e.dataIndex].time;
        value += '<br/>';
        value += `播放量 ${contentPerformance.value[e.dataIndex].avgPlayNum}`;
        value += '<br/>';
        value += `点赞量 ${contentPerformance.value[e.dataIndex].praiseNum}`;
        value += '<br/>';
        value += `评论数 ${contentPerformance.value[e.dataIndex].commentNum}`;
        value += '<br/>';
        value += `互动率 ${contentPerformance.value[e.dataIndex].avgInteractRate}`;
        return value;
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        rotate: -45,
        interval: 0,
        fontSize: 14
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          color: '#f85277',
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  };
  myEChart.setOption(option);
}
// 计算近3个月每天发布视频数，造测试数据，后续要删除
const createDayReleaseCount = () => {
  dayReleaseCount.value.map(item => {
    for (let i = 1; i < 32; i++) {
      item.days.push({
        time: `${item.month}-${i}`,
        count: 1
      });
    }
  });
}
const queryVideoList = () => {
  api.sensation.queryVideoList(releaseContentForm.value).then(res => {
    releaseContent.value = res.list;
    releaseContentForm.value.total = res.page.total;
  });
}
const releaseContentCurrentChange = e => {
  releaseContentForm.value.page = e;
  queryVideoList();
}
const toLink = url => {
  window.open(url, '_blank');
}

onMounted(() => {
  createDayReleaseCount();
  recentPartEchart();
  queryVideoList();
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  margin-bottom: 24px;

  .card-name {
    display: flex;
    align-items: center;
    font-size: 16;
    color: #333;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: @main-color;
      margin-right: 8px;
    }
  }

  .card-desc {
    border-top: 2px solid #ededed;
    color: #999;
    padding-top: 14px;
    font-size: 14px;
  }
}

.pagination {
  padding-top: 20px;
  justify-content: end;
}

.part-one {
  .total-part {
    width: 400px;
    height: 160px;

    .part-main {
      height: 100px;

      p {
        color: #333;
      }

      img {
        width: 100px;
        height: 100px;
      }
    }
  }

  .views-part {
    width: 844px;
    height: 160px;

    .part-main {
      padding-top: 35px;
      padding-left: 24px;
      position: relative;

      div {
        position: relative;
        z-index: 10;
        margin-right: 35px;

        &:first-child {
          padding-right: 50px;
          margin-right: 25px;
          border-right: 2px solid #ededed;

          p:last-child {
            color: #333;
          }
        }

        p {
          &:first-child {
            color: #333;
            margin-bottom: 4px;
          }

          &:last-child {
            color: #999;
          }
        }
      }

      img {
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
        height: 100px;
      }
    }
  }
}

.part-two {
  height: 290px;

  .part-main {
    margin-top: 50px;

    .action-item {
      &:nth-child(1) .block {
        border-left-color: rgb(255, 82, 119);
        border-top-color: rgb(255, 82, 119);
      }

      &:nth-child(2) .block {
        border-left-color: rgb(115, 222, 179);
        border-top-color: rgb(115, 222, 179);
      }

      &:nth-child(3) .block {
        border-left-color: rgb(85, 92, 253);
        border-top-color: rgb(85, 92, 253);
      }

      &:nth-child(4) .block {
        border-left-color: rgb(253, 189, 54);
        border-top-color: rgb(253, 189, 54);
      }
    }

    .blockOut {
      position: relative;
      width: 200px;
      height: 100px;
      overflow: hidden;
      margin: 0 auto;

      .block {
        position: absolute;
        width: 200px;
        height: 200px;
        border-left: 20px solid;
        border-top: 20px solid;
        border-right: 20px solid #f2f2f2;
        border-bottom: 20px solid #f2f2f2;
        border-radius: 50%;
        transform-origin: 50%;
      }

      .value {
        position: absolute;
        left: 50%;
        top: 45px;
        transform: translateX(-50%);
        text-align: center;

        .num {
          color: #333;
          line-height: 27px;
        }

        .title {
          margin-top: 5px;
          color: #666;
          line-height: 20px;
        }
      }
    }

    .subtitle {
      color: #999;
      line-height: 20px;
      text-align: center;
      margin-top: 24px;
    }
  }
}

.part-three {
  position: relative;
  height: 500px;

  .top-btns {
    position: absolute;
    top: 24px;
    right: 40px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    padding: 6px 8px;

    p {
      height: 32px;
      padding: 0 16px;
      border-radius: 8px;
      color: #666;
      line-height: 30px;
      border: 1px solid transparent;

      &.active {
        background: #ffedf1;
        border: 1px solid rgba(255, 82, 119, .5);
        color: #f85277;
      }
    }
  }

  .part-main {
    margin-top: 40px;
    padding: 24px;
    height: 384px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    .tips {
      .tips-left {
        color: #999;
        line-height: 17px;
      }

      .tips-right {
        i {
          color: #fdbd36;
          margin-right: 8px;
        }

        span {
          color: #666;
        }
      }
    }

    #recent-part-echart {
      height: 320px;
    }
  }
}

.part-four {
  .calendar-part {
    flex: 1;
    // width: 840px;
    height: 652px;

    .hot-base {
      height: 50px;
      margin-top: 40px;

      .hot-base-left {
        .icon {
          width: 50px;
          height: 50px;
          margin-right: 8px;
          background: rgba(255, 82, 119, .1);
          border-radius: 10px;

          i {
            font-size: 30px;
            color: @main-color;
          }
        }

        .num {
          .value {
            color: #333;
            margin-bottom: 4px;
          }

          .desc {
            color: #666;
          }
        }
      }

      .hot-base-right {
        .top {
          color: #999;
          margin-bottom: 8px;
        }

        .chart-tips {
          justify-content: flex-end;

          .chart-tips_bar {
            span {
              width: 80px;
              height: 10px;
              position: relative;

              &::before {
                position: absolute;
                font-size: 12px;
                color: #999;
                line-height: 17px;
                top: 12px;
              }

              &:nth-child(1) {
                background: rgb(255, 82, 119);

                &::before {
                  content: ">8";
                  left: 0;
                }
              }

              &:nth-child(2) {
                background: rgba(255, 82, 119, 0.8);

                &::before {
                  content: "6";
                  left: -4px;
                }
              }

              &:nth-child(3) {
                background: rgba(255, 82, 119, 0.6);

                &::before {
                  content: "4";
                  left: -4px;
                }
              }

              &:nth-child(4) {
                background: rgba(255, 82, 119, 0.4);

                &::before {
                  content: "2";
                  left: -4px;
                }

                &::after {
                  content: "0";
                  position: absolute;
                  font-size: 12px;
                  color: #999;
                  line-height: 17px;
                  top: 12px;
                  right: 0;
                }
              }
            }
          }
        }
      }
    }

    .choose-bar {
      margin-top: 22px;
      height: 34px;
      padding: 2px 8px;
      border: 1px solid #f2f2f2;
      border-radius: 8px;

      i {
        color: #e2e2e2;
      }

      span {
        color: #666;
      }
    }

    .choose-box {
      margin-top: 10px;
      padding: 20px 0 20px 28px;
      border-radius: 8px;
      border: 1px solid #f2f2f2;

      .column-week {
        padding-top: 25px;
        margin-right: 12px;
        flex-shrink: 0;

        .column-week_box {
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #666;
        }
      }

      .column-month {
        flex: 1;
        margin-right: 16px;

        .column-month_title {
          text-align: center;
          color: #666;
          line-height: 17px;
          margin-bottom: 8px;
        }

        .column-month_days {
          height: 280px;

          .day {
            border-radius: 8px;
            text-align: center;
            color: #fff;
            background: #f8f8f8;
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin: 4px;

            &.empty {
              visibility: hidden;
            }

            &.bg-level-0 {
              background: #f8f8f8;
            }

            &.bg-level-1 {
              background: rgba(255, 82, 119, 0.4);
            }

            &.bg-level-2 {
              background: rgba(255, 82, 119, 0.6);
            }

            &.bg-level-3 {
              background: rgba(255, 82, 119, 0.8);
            }

            &.bg-level-4 {
              background: rgb(255, 82, 119);
            }
          }
        }
      }
    }
  }

  .words-part {
    width: 404px;
    height: 652px;
  }
}

.part-five {
  .card-view {
    margin-top: 40px;
    padding: 0 20px;

    .item {
      width: 280px;
      margin-bottom: 24px;
      margin-right: 16px;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .item-img {
        position: relative;
        border-radius: 10px;
        overflow: hidden;

        &:hover {
          img {
            transform: scale(1.2);
          }

          .player {
            background: @main-color;
          }
        }

        img {
          width: 280px;
          height: 157px;
          transition: all .3s;
        }

        div {
          position: absolute;
          left: 0;
          bottom: 10px;
          width: 100%;
          padding: 0 16px;

          .player {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background: rgba(0, 0, 0, 0.4);

            i {
              color: #fff;
            }
          }

          .time {
            color: #fff;
          }
        }
      }

      .item-name {
        margin-top: 8px;
        color: #333;
      }

      .item-data {
        margin-top: 16px;

        p {
          margin-right: 16px;

          i {
            color: #999;
            margin-right: 2px;
          }

          span {
            color: #999;
          }
        }
      }
    }
  }
}
</style>
